<template>
  <div class="news-box">
    <el-card class="table-card">
      <template #header>
        <el-button @click="addLists()" size="large" icon="Plus">添加地址黑名单</el-button>
      </template>
    </el-card>
    <el-table :data="lists" border style="width: 100%" @row-click="rowCli">
      <el-table-column prop="id" label="编号" align="center" width="100px" header-align="center"></el-table-column>

      <el-table-column prop="name" label="关键字" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="context" label="提示原因" align="center" header-align="center"> </el-table-column>

      <el-table-column label="操作" align="center" header-align="center" width="160px">
        <template #default="scope">
          <el-icon @click.stop="editFun(scope.row)" class="lists-edit-icon">
            <Edit />
          </el-icon>

          <el-icon @click.stop="deleteFun(scope.row.id)" class="lists-delete-icon">
            <Delete />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加编辑文章类型 -->
    <addEdit :show="showAddEdit" :addEditData="addEditData" :status="addEditStatus" @hide-addEdit="hideAddEdit" />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import {
  getAddressKeyList,
  deleteAddressKey
} from '@api/addressKey'
import addEdit from './components/addEdit.vue'
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'

// *********************************************列表
const lists = ref([])

//获取列表
async function getLists() {

  let res = await getAddressKeyList()

  if (res.code == 200) {
    lists.value = res.data
  }

}

// *********************************************添加编辑
const showAddEdit = ref(false) //显示隐藏弹框
const addEditStatus = ref('add') //添加编辑状态
const addEditData = ref({
  key: '',
  context: ''
})

//添加文章
function addLists() {
  addEditData.value = {
    key: '',
    context: ''
  }
  addEditStatus.value = 'add'
  showAddEdit.value = true
}

//添加编辑文章回调
function hideAddEdit(type) {
  showAddEdit.value = false
  if (type != 'cancel') {
    getLists()
  }
}

//编辑文章
function editFun(item) {
  let {
    id,
    name,
    context
  } = item;

  addEditData.value.id = id
  addEditData.value.key = name
  addEditData.value.context = context
  addEditStatus.value = 'edit'
  showAddEdit.value = true
}

//删除文章
function deleteFun(id, index) {
  ElMessageBox.confirm('确定删除地址黑名单?')
    .then(async () => {
      let res = await deleteAddressKey({ id })
      if (res.code == 200) {
        ElMessage({
          message: '操作成功!',
          type: 'success',
        })
        getLists()
      }
    })
    .catch(() => { })
}

onMounted(() => {
  getLists()
})
</script>
<style lang="scss" scoped></style>
  